import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

import { SafeAreaView } from 'react-navigation';
import BaseStyle from '../constants/Style';
import Radio from '../components/radio';

export default class RadioScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: true,
      checked2: false,
    };
  }

  render() {
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <View style={styles.container}>
          <Radio
            checked={this.state.checked}
            color={'#31bcfe'}
            size={20}
            onPress={() => {
              this.setState({
                checked: !this.state.checked,
              });
            }}
          />
          <View style={styles.radView}>
            <Radio
              checked={this.state.checked2}
              color={'#31bcfe'}
              onPress={() => {
                this.setState({
                  checked2: !this.state.checked2,
                });
              }}
            />
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#eee',
  },
  container: {
    ...BaseStyle.flex,
    paddingTop: 20,
    paddingLeft: 30,
  },
  radView: {
    marginTop: 20,
  },
});
